// components/music/music.js
Page({
	
	/**
	 * 页面的初始数据
	 */
	data: {
		tab: 0,
		background: ['https://i0.hdslb.com/bfs/sycp/creative_img/202009/c2ce38fedea327d9cb3f1fbef6edf04e.jpg@880w_388h_1c_95q', 'https://i0.hdslb.com/bfs/archive/94ca407ae9f34cac93d931d1244b49da7ea77f53.jpg@880w_388h_1c_95q', 'https://i0.hdslb.com/bfs/sycp/creative_img/202009/efb45468ce84145bec90d93592670760.jpg@880w_388h_1c_95q'],
		musics: [
			{
				id: 1,
				cover: "./imgs/cover/彩虹.jpg",
				title: "彩虹"
			},
			{
				id: 2,
				cover: "./imgs/cover/轨迹.jpg",
				title: "轨迹"
			},
			{
				id: 3,
				cover: "./imgs/cover/旅途.jpg",
				title: "旅途"
			},
			{
				id: 4,
				cover: "./imgs/cover/彩虹.jpg",
				title: "彩虹"
			},
			{
				id: 5,
				cover: "./imgs/cover/轨迹.jpg",
				title: "轨迹"
			},
			{
				id: 6,
				cover: "./imgs/cover/旅途.jpg",
				title: "旅途"
			},
			{
				id: 7,
				cover: "./imgs/cover/彩虹.jpg",
				title: "彩虹"
			},
			{
				id: 8,
				cover: "./imgs/cover/轨迹.jpg",
				title: "轨迹"
			},
			{
				id: 9,
				cover: "./imgs/cover/旅途.jpg",
				title: "旅途"
			}
		],
		play: {
			currentTime: '00:00',
			duration: '00:00',
			percent: 0,
			title: '',
			singer: '',
			coverImgUrl: './imgs/cover/旅途.jpg',
		},
		playlist: [
			{
				id: 1,
				title: '彩虹',
				singer: '周杰伦',
				src: 'http://localhost/music/彩虹.mp3',
				coverImgUrl: './imgs/cover/彩虹.jpg'
			}, {
				id: 2,
				title: '轨迹',
				singer: '周杰伦',
				src: 'http://localhost/music/轨迹.mp3',
				coverImgUrl: './imgs/cover/轨迹.jpg'
			}, {
				id: 3,
				title: '旅途(Live)',
				singer: '陈楚生',
				src: 'http://localhost/music/旅途.mp3',
				coverImgUrl: './imgs/cover/旅途.jpg'
			}
		],
		state: 'paused',
		vertical: false,
		interval: 2000,
		duration: 500
	},
	changeItem: function (e) {
		this.setData({
			tab: e.target.dataset.item
		})
	},
	changeTab: function (e) {
		this.setData({
			tab: e.detail.current
		})
	},
	
	//===========播放相关==============
	audioCtx: null,
	onReady: function () {
		this.audioCtx = wx.createInnerAudioContext()
		this.setMusic(0)
		this.audioCtx.onError(() => console.log('播放失败：' + this.audioCtx.src))
		this.audioCtx.onEnded(() => this.next())
		this.audioCtx.onPlay(() => {
		})
		this.audioCtx.onTimeUpdate(() => {
			this.setData({
				'play.duration': formatTime(this.audioCtx.duration),
				'play.currentTime': formatTime(this.audioCtx.currentTime),
				'play.percent': this.audioCtx.currentTime / this.audioCtx.duration * 100
			})
		})
		
		function formatTime(time) {
			var minute = Math.floor(time / 60) % 60;
			var second = Math.floor(time) % 60
			return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
		}
	},
	setMusic: function (index) {
		var music = this.data.playlist[index]
		this.audioCtx.src = music.src
		this.setData({
			playIndex: index,
			'play.title': music.title,
			'play.singer': music.singer,
			'play.coverImgUrl': music.coverImgUrl,
			'play.currentTime': '00:00',
			'play.duration': '00:00',
			'play.percent': 0
		})
	},
	play: function () {
		this.audioCtx.play()
		this.setData({
			state: 'running'
		})
	},
	pause: function () {
		this.audioCtx.pause()
		this.setData({
			state: 'paused'
		})
	},
	next: function () {
		var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
		this.setMusic(index)
		if (this.data.state === 'running') {
			setTimeout(() => {
				this.pause()
				this.play()
			}, 500);
		}
	},
	sliderChange: function (e) {
		var second = e.detail.value * this.audioCtx.duration / 100
		this.audioCtx.seek(second)
		setTimeout(() => {
			this.pause()
			this.play()
		}, 200)
	},
	change: function (e) {
		this.setMusic(e.currentTarget.dataset.index)
		this.play()
	}
})